<template>
    <div class="container">
        <div class="cell-area" @touchmove="ontouchmove" :bubble="true">
            <div class="cell-content" :style="_contentStyle">
                <div class="cell-info" style="padding-top: 10px;">
                    <text class="text-notmal pd-height">{{userName}}</text>
                    <text class="text-success pd-height" style="padding-left: 20px;">{{jobName}}</text>
                </div>
                <div class="cell-phone" style="padding-bottom: 10px;">
                    <text class="text-minor fsize-25 pd-height">手机号：{{phone}}</text>
                </div>
            </div>
            <div class="cell-arrow">
                <wxc-icon name="more" @wxcIconClicked="toDetail"></wxc-icon>
            </div>
            <div class="delete-area" :style="_deleteStyle" @click="deletePanelClicked">
                <text class="delete-t">删除</text>
            </div>
        </div>
    </div>
</template>

<!--全局通用样式-->
<style>


    .fsize-25 {
        font-size: 25px;
    }

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }


</style>
<style>


    .delete-area {
        justify-content: center;
        align-items: center;
        background-color: red;
        height: 120px;
    }

    .delete-t {
        color: white;
        font-size: 30px;
    }

    .pd-height {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .container {
        flex-direction: column;
        background-color: #f2f3f4;
    }

    .cell-content {
        flex-direction: column;
        width: 600px;
        padding-left: 15px;
    }

    .cell-arrow {
        width: 150px;
        align-items: flex-end;
    }

    .cell-area {
        background-color: white;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
    }

    .cell-info {
        flex-direction: row;
    }


</style>

<script>
    import {WxcIcon} from 'weex-ui'
    import nw from '../network/nw.js'

    export default {
        components: {WxcIcon},
        props:{
            userName:{
                type:String
            },
            jobName:{
                type:String
            },
            phone:{
                type:String
            }
        },
        data: () => ({
            deleteShow: false,
            deleMovTimp: 0,//删除移动的时间戳
            movXArea: [0,0],//移动区间值
            isResult:false,
            resData:[],

        }),
        computed: {
            _contentStyle() {
                return {width: this.deleteShow ? 400 : 600}
            },
            _deleteStyle() {
                return {width: this.deleteShow ? 200 : 0}
            }
        },
        methods: {
            ontouchmove(e) {
                var x = e.changedTouches[0].pageX

                if (this.deleMovTimp == 0 || e.timestamp - this.deleMovTimp > 100) {
                    this.deleMovTimp = e.timestamp
                    this.movX = x
                    this.isResult = false
                    this.movXArea[0] = x
                    this.movXArea[1] = x
                } else if(!this.isResult && x - this.movXArea[1] < 0){

                    if(this.movXArea[0] - this.movXArea[1] > 20) {
                        this.deleMovTimp = e.timestamp
                        this.isResult = true
                        this.deleteShow = true
                    }else{
                        this.movXArea[1] = x
                    }

                }else if(!this.isResult && x - this.movXArea[1] > 0){
                    if(this.movXArea[1] - this.movXArea[0] > 20) {
                        this.deleMovTimp = e.timestamp
                        this.isResult = true
                        this.deleteShow = false
                    }else{
                        this.movXArea[1] = x
                    }
                }
            },
            deletePanelClicked(){
                this.$emit('deleteClicked', {})
            },

            toDetail(){
                this.$emit('detailClicked', {})
            }
        },
        created(){

        }
    }
</script>